<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="" id="sel01">
        <option value="-1">---选择省份---</option>
        <option value="hn">湖南</option>
        <option value="hb">湖北</option>
        <option value="bj">北京</option>
    </select>
    <select name="" value="sel02">
        <option value="-1">---选择城市---</option>
        <option value="-1">---选择城市---</option>
    </select>
    <select name="" value="sel03">
        <option value="-1">---选择地区---</option>
    </select>
    <script>
        let $=function(id){
            return document.getElementById(id);
        }
        let citys={
            'hn':[new Option('---选择城市---','-1'),new Option('长沙','cs'),new Option('湘潭','xt'),new Option('浏阳','ly')],
            'hb':[new Option('---选择城市---','-1'),new Option('武汉','wh'),new Option('黄冈','hg')],
            'bj':[new Option('---选择城市---','-1'),new Option('朝阳区','cyq'),new Option('海淀区','hdq')]
        };
        $('sel01').onchange=function(){
            console.log(this.options,this.options.selectedIndex);
            let index=this.options.selectedIntex;
            let option=this.options[index];
            console.log(option.value,option.text);
            let arr=citys[option.value];
            console.log(arr);
            $('sele02').options.length=0;
            for(let i=0;i<arr.length;i++){
                $('sel02').options[i]=arr[i];
            }
        }    </script>
</body>
</html>